const gulp = require("gulp");
const watch = require("gulp-watch");
const sourcemaps = require("gulp-sourcemaps");
const sass = require("gulp-sass")(require("sass"));
const autoprefixerB = require("gulp-autoprefixer");
const clean = require("gulp-clean");
const cssRemoveSpace = require("yllgulp-remove-spaces-line");
gulp.task("default", function () {});

//给css添加浏览器的前缀
function autopre() {
  return gulp
    .src(["./sass/**/*.scss"])
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError)) //compressed | expanded
    .pipe(
      autoprefixerB({
        cascade: true, // 设定最终生成的css的样式
      })
    )
    .pipe(cssRemoveSpace())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("./css/"));
}

function cleanDist() {
  return gulp
    .src(["css/**/*.*"], {
      read: false,
      allowEmpty: true,
    })
    .pipe(clean());
}

//动态的监听css的变化
function watchCssChange() {
  watch(["./sass/**/*.scss"], gulp.series(cleanDist, autopre));
}

//tudo自动编译完成处理
gulp.task("watch", gulp.series(cleanDist, autopre, watchCssChange));
